<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> -->
    <script src="../node_modules/vue/dist/vue.global.js"></script>
</head>

<body>
    <div id="app">
        <p>父组件数据count: {{count}}</p>
        <!-- 使用子组件 -->
        <part :count1='count' :addcount="addCount"></part>
    </div>
</body>

</html>
<script>
    // 父传子
    // 方式2: 通过$parant 这个组件实例上的方法, 该方法可以获取父组件的实例对象. 
    // 获取到父组件实例后, 就可以获取该实例上绑定的所有的属性和方法 了.


    // 单向数据流
    // 通过props 实现父传子, 遵循单向数据流的改变, 在子组件中不能修改通过props 传递的来自
    // 父组件中的数据

    // 注意: 可以在子组件上通过this.$parent 方法修改父组件上的数据. 这种方式还是相当于在父组件上改的数据
    // 注意: 还可以将修改父组件数据的方法传递给子组件, 然后在子组件上调用父组件这个修改方法, 实现修改数据
    const { createApp } = Vue;
    const vm = createApp({
        data() {
            return {
                count: 100
            }
        },
        methods: {
            addCount() {
                this.count++
            }
        },

        components: {
            part: {
                template: `<div>
                                <p> <button @click='emitFn'>父传子</button></p>
                                <p>子组件上的count: {{childcount}}</p>
                           </div>`,
                data() {
                    return {
                        childcount: 0
                    }
                },
                props: ['count1', 'addcount'],
                methods: {
                    emitFn() {
                        // 获取当前组件的实例
                        // console.log(this);
                        // console.log(this.$parent.count)
                        // this.childcount += this.$parent.count
                        // 该种方式可以修改父组件的数据
                        // this.$parent.count = 2000

                        // 该种方式不能修改父组件中的数据
                        console.log('父组件中的count', this.count1);
                        // this.count1 = 200
                        this.addcount()
                    }
                }

            }
        }


    });

    //挂载根实例到根节点
    vm.mount('#app')

</script>